<template>
    <div>
        <el-button type="warning" size="small" id="audit" @click="AuditComment_show=true"><i class="el-icon-finished"></i>审批</el-button>
        <el-button type="success" size="small" id="printBtn" v-print="printObj"><i class="el-icon-printer"></i>打印</el-button>

        <form class="wrapper" id="wrapperApplyPurchaseTable">
            <div class="header">
                <img src="/image/logo.jpg" /><label>固基行远，协晨悟通</label>
            </div>
            <h2 class="Title">固远晨通科技发展有限公司项目备案表</h2>
            <table class="report_data" id="LAY-EXPORT-TEST" rules=all>
                <tr>
                    <td class="td_Title">项目名称</td>
                    <td class="td_Content">{{dataProject.ProjectName}}</td>
                    <td class="td_Title">所属行业</td>
                    <td class="td_Content">{{dataProject.Industry}}</td> 
                    <td class="td_Title">项目编号</td> 
                    <td class="td_Content" colspan="2">{{dataProject.ProjectNumber}}</td>
                </tr>
                <tr>
                    <td class="td_Title">开始时间</td>
                    <td class="td_Content">{{ fmtDate(dataProject.CreateDate) }}</td>
                    <td class="td_Title">结束时间</td>
                    <td class="td_Content">{{ fmtDate(dataProject.FinishDate) }}</td>
                    <td class="td_Title">预计工期（天）</td>
                    <td class="td_Content" colspan="2">{{ Datedifference(dataProject.CreateDate,dataProject.FinishDate) }}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">预计合同额</td>
                    <td class="td_Content">{{dataProject.EstimatedContractAmount}}</td>
                    <td v-show="OneShow" class="td_Title">经营人员</td>
                    <td v-show="TwoShow" class="td_Title">申请人</td>
                    <td class="td_Content">{{ GetNameByUserId(dataProject.ApplyUserid) }}</td>
                    <td class="td_Title">申请部门</td>
                    <td class="td_Content" colspan="2">{{ GetDepartmentById(dataProject.DepartmentId) }}</td>
                </tr>
                <tr class="tr_two">
                    <td class="td_Title">项目类型</td>
                    <td class="td_Content" colspan="6">
                        <el-checkbox-group v-model="ProjectTypeLis" size="medium" disabled>
                            <el-checkbox :label="1" border>施工生产</el-checkbox>
                            <el-checkbox :label="2" border>产品生产</el-checkbox>
                            <el-checkbox :label="4" border>产品研发</el-checkbox>
                            <el-checkbox :label="8" border>技术服务</el-checkbox>
                            <el-checkbox :label="16" border>其它</el-checkbox>
                        </el-checkbox-group>
                    </td>
                </tr>
                <tr class="tr_two">
                    <td class="td_Title">项目概况</td>
                    <td valign="top" class="td_Content td_left" colspan="6">{{dataProject.Survey}}</td>
                </tr>
                <tr v-show="TwoShow" class="tr_two">
                    <td class="td_Title">性能指标</td>
                    <td class="td_Content td_left">{{ dataProject.PerformanceIndex}}</td>
                    <td v-show="TwoShow" class="td_Title">验收指标</td>
                    <td class="td_Content td_left">{{ dataProjectApproval.AcceptancIndex}}</td>
                    <td v-show="TwoShow" class="td_Title">人机料法环</td>
                    <td class="td_Content td_left" colspan="2">{{dataProjectApproval.ManMachine}}</td>
                </tr>
                <tr v-show="TwoShow" class="tr_two">
                    <td class="td_Title">预期成果概述</td>
                    <td class="td_Content td_left" colspan="6">{{dataProjectApproval.OverviewOfExpected}}</td>
                </tr>
                <tr class="tr_one">
                    <td v-show="OneShow" class="td_Title">建设单位</td>
                    <td v-show="TwoShow" class="td_Title">执法部门</td>
                    <td class="td_Content">{{dataProjectApproval.BuildUnit}}</td>
                    <td class="td_Title">设计单位</td>
                    <td class="td_Content">{{dataProjectApproval.DesignUnit}}</td>
                    <td class="td_Title">勘察单位</td>
                    <td class="td_Content" colspan="2">{{dataProjectApproval.ReconnaissanceUnit}}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">监理单位</td>
                    <td class="td_Content">{{dataProjectApproval.ConstructionControlUnit}}</td>
                    <td class="td_Title">施工单位</td>
                    <td class="td_Content">{{dataProjectApproval.ConstructionUnit}}</td>
                    <td class="td_Title">质检单位</td>
                    <td class="td_Content" colspan="2">{{dataProjectApproval.QualityInspectionUnit}}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">建设地点</td>
                    <td class="td_Content">{{dataProjectApproval.BuildPlace}}</td>
                    <td class="td_Title">基础类型</td>
                    <td class="td_Content">{{dataProjectApproval.BaseType}}</td>
                    <td class="td_Title">其它</td>
                    <td class="td_Content" colspan="2">{{dataProjectApproval.OtherUnit}}</td>
                </tr>
                <tr class="tr_one"><td class="td_Title" colspan="7">人员配置</td></tr>
                <tr class="tr_one">
                    <td class="td_Title">阶段</td>
                    <td class="td_Title">岗位</td>
                    <td class="td_Title">人数（名）</td>
                    <td class="td_Title">阶段</td>
                    <td class="td_Title">岗位</td>
                    <td class="td_Title">人数（名）</td>
                    <td class="td_Title">工作内容</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title" rowspan="3">项目组织人员</td>
                    <td class="td_Title">项目指导员</td>
                    <td class="td_Content">{{dataProjectApproval.ProjectInstructorAmount}}</td>
                    <td class="td_Title" rowspan="3">实施阶段</td>
                    <td v-show="OneShow" class="td_Title">技术人员</td>
                    <td v-show="TwoShow" class="td_Title">研发人员</td>
                    <td class="td_Content">{{dataProjectApproval.ArtisanAmount}}</td>
                    <td class="td_Content">{{dataProjectApproval.ArtisanWork}}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">项目负责人</td>
                    <td class="td_Content">{{dataProjectApproval.ProjectLeaderAmount}}</td>
                    <td v-show="OneShow" class="td_Title">施工人员</td>
                    <td v-show="TwoShow" class="td_Title">工艺人员</td>
                    <td class="td_Content">{{dataProjectApproval.ConstructionerAmount}}</td>
                    <td class="td_Content">{{dataProjectApproval.ConstructionerWork}}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">其它</td>
                    <td class="td_Content">{{dataProjectApproval.OtherProjectManAmount}}</td>
                    <td v-show="OneShow" class="td_Title">外聘人员</td>
                    <td v-show="TwoShow" class="td_Title">工艺人员</td>
                    <td class="td_Content">{{dataProjectApproval.OutsideStaffAmount}}</td>
                    <td class="td_Content">{{dataProjectApproval.OutsideStaffWork}}</td>
                </tr>
                <tr class="tr_one"><td class="td_Title" colspan="7">配合部门</td></tr>
                <tr class="tr_one">
                    <td class="td_Title">部门名称</td>
                    <td class="td_Title">人员姓名</td>
                    <td class="td_Title">工作内容</td>
                    <td class="td_Title">部门名称</td>
                    <td class="td_Title">人员姓名</td>
                    <td class="td_Title" colspan="2">工作内容</td>
                </tr>
                <tr class="tr_one" id="HelpDepartment"><td class="td_Title" colspan="7">风险控制</td></tr>
                <tr class="tr_two">
                    <td class="td_Title">经营风险</td>
                    <td valign="top" class="td_Content td_left" colspan="6">{{dataProjectApproval.BusinessRisk}}</td>
                </tr>
                <tr class="tr_two">
                    <td class="td_Title">生产风险</td>
                    <td valign="top" class="td_Content td_left" colspan="6">{{dataProjectApproval.ProductionRisk}}</td>
                </tr>
                <tr class="tr_two">
                    <td class="td_Title">其它风险</td>
                    <td valign="top" class="td_Content td_left" colspan="6">{{dataProjectApproval.OtherRisk}}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">计划经营部签批</td>
                    <td colspan="2">
                        <p class="audit" id="audit1">{{ GetNameByUserId(dataProjectApproval.AuditUserId1) }}</p>
                        <p class="time" id="time1">{{ fmtDate(dataProjectApproval.AuditTime1) }}</p>
                    </td>
                    <td class="td_Title">运营综合部签批</td>
                    <td colspan="3">
                        <p class="audit" id="audit2">{{ GetNameByUserId(dataProjectApproval.AuditUserId2) }}</p>
                        <p class="time" id="time2">{{ fmtDate(dataProjectApproval.AuditTime2) }}</p>
                    </td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title">财务部签批</td>
                    <td colspan="2">
                        <p class="audit" id="audit3">{{ GetNameByUserId(dataProjectApproval.AuditUserId3) }}</p>
                        <p class="time" id="time3">{{ fmtDate(dataProjectApproval.AuditTime3) }}</p>
                    </td>
                    <td class="td_Title">总经理/董事长签批</td>
                    <td colspan="3">
                        <p class="audit" id="audit4">{{ GetNameByUserId(dataProjectApproval.AuditUserId4) }}</p>
                        <p class="time" id="time4">{{ fmtDate(dataProjectApproval.AuditTime4) }}</p>
                    </td>
                </tr>
            </table>
            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
            <div id="Footer">
                <div><span style="margin-right: 100px;">固远晨通科技发展有限公司</span><span>网址：<a>www.guyuanct.com</a></span></div>
                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
            </div>
        </form>

        <el-dialog v-if="AuditComment_show" :modal="false"  :visible.sync="AuditComment_show" width="40%" title="审批"  :before-close="onClose">
            <AuditComment ref="AuditCommentRef" :approval-receipt="Approval_event" :approval="Approval"></AuditComment>
        </el-dialog>
    </div>
</template>

<script>
    import * as publicjs from '../../../../public/Scriput/Public'
    import AuditComment from "../../AuditComment";

    export default {
        name: "ProjectinitiationformTable",
        components:{
            AuditComment,
        },
        props:{
            project:{
                type:Object,
                required:true,
            }
        },
        data(){
            return{
                OneShow:false,
                TwoShow:false,
                GetCompanyAllUsers:[],
                GetAllDepartment:[],
                dataProject:{},
                dataProjectApproval:{},
                dataProjectPeoples:[],
                printObj: {
                    id: "wrapperApplyPurchaseTable",  //打印标签的id
                    popTitle: '',  //文件标题
                },
                // 审批弹窗返回数据
                Approval: {
                    State: 1,
                    Comment: '',
                },
                // 审批弹框
                AuditComment_show:false,
                ProjectTypeLis:[],
            }
        },
        mounted() {
            let _this = this
            _this.$nextTick(()=>{
                _this.Init()
                _this.GetData()
            })
        },
        methods:{
            Init(){
                this.GetCompanyAllUsers = publicjs.GetCompanyAllUsers(this.$http)
                this.GetAllDepartment = publicjs.GetAllDepartment(this.$http)
            },
            //数据转换
            fmtDate(val){
                if (val!=null&&val!=''){
                    return val.split(' ')[0]
                }else{
                    return ''
                }
            },
            //构造详细的申购单内物资信息
            GetData(){
                this.$http.post('Project1/GetProjectApprovalReport',{ ProjectId: this.project.Id }).then(res=>{
                    console.log(res.data)
                    this.dataProject = res.data.dataProject;
                    this.dataProjectApproval = res.data.dataProjectApproval;
                    this.dataProjectPeoples = res.data.dataProjectPeoples;
                    if (res.data.dataProject.ProjectType == 1){
                        this.OneShow = true
                        this.TwoShow = false
                    }else{
                        this.OneShow = false
                        this.TwoShow = true
                    }
                    this.ProjectTypeLis = this.dataProject.ProjectType.toString().split(',').map(x=> parseInt(x))
                    this.InitProjectPeople(this.dataProjectPeoples)
                })
            },
            //根据userid获取userName,主要用于公司人员
            GetNameByUserId(UserId){
                for (let i=0;i<this.GetCompanyAllUsers.length;i++){
                    if (this.GetCompanyAllUsers[i].Id == UserId){
                        return this.GetCompanyAllUsers[i].UserName
                    }
                }
            },
            //根据userid获取userName,主要用于公司人员
            GetDepartmentById(DepartmentId){
                for (let i=0;i<this.GetAllDepartment.length;i++){
                    if (this.GetAllDepartment[i].Id  == DepartmentId){
                        return this.GetAllDepartment[i].DepartmentName
                    }
                }
            },
            // 关闭审批结果组件
            async onClose(done) {
                await done();
                this.$refs["AuditCommentRef"].FormClose_event();
            },
            //审批
            Approval_event(){
                this.$http.post('Project1/AuditProjectApprovalReport',{ ProjectId:this.project.Id }).then(res=>{
                    if (res.data.IsSuccess){
                        this.$message.success(res.data.Msg)
                        this.AuditComment_show=false
                        this.GetData()
                    }else{
                        this.$message.warning(res.data.Msg)
                    }
                })
                this.$refs["AuditCommentRef"].FormClose_event();
            },
            //天数计算
            Datedifference(CreateDate,FinishDate){
                return publicjs.datedifference(CreateDate,FinishDate)
            },
            //人员绑定
            InitProjectPeople(ProjectPeoples) {
                var tr
                var html=''
                if(ProjectPeoples.length>0){
                    ProjectPeoples.forEach((d,i)=>{
                        if (i % 2 == 0) {
                            tr = document.createElement('tr')
                            tr.className = 'tr_one'
                            html += "<td style='padding: 12px 0px'>" + this.GetDepartmentById(d.DepartmentId) + "</td><td>" + d.UserName + "</td><td>" + d.WorkContent + "</td>";
                            tr.innerHTML += html;
                            if (i == ProjectPeoples.length - 1) {//验证是否为最后一条数据
                                document.getElementById("HelpDepartment").insertAdjacentHTML('beforeBegin',tr.innerHTML += "<td></td><td></td><td colspan='2'></td>");
                            }
                            html = ''
                        }
                        else {
                            html += "<td>" + this.GetDepartmentById(d.DepartmentId) + "</td><td>" + d.UserName + "</td><td colspan='2' >" + d.WorkContent + "</td>";
                            tr.innerHTML += html
                            document.getElementById("HelpDepartment").insertAdjacentHTML('beforeBegin',tr.innerHTML);
                            html = ''
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped>
    #audit {
        position: absolute;
        right: 11%;
        top: 80px;
        z-index: 9999;
    }
    #printBtn {
        position: absolute;
        right: 11%;
        top: 115px;
        z-index: 9999;
    }
    /*外包装样式*/
    .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 10px 0px;
        position: relative;
    }

    .header img {
        width: 200px;
        height: 55px;
    }

    .header label {
        position: absolute;
        bottom: 10px;
        right: 70px;
    }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

    .report_data tr {
        height: 40px;
    }

    .report_data th {
        font-weight: 100;
    }
    .baseInfo .worderWrapper {
        display: inline-block;
        width: 200px;
    }
    .report_audit .tdCenter {
        text-align: center;
    }

    .report_audit tr {
        height: 70px;
    }

    .report_audit tr p {
        padding: 3px;
    }

    .report_audit td {
        padding: 0 10px;
    }

    .report_audit td:first-child {
        width: 150px;
    }

    .report_audit .tr_center {
        text-align: center;
    }

    tr p.audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
        /*padding-right: 110px;*/
    }

    tr p.audit span {
        display: inline-block;
        width: 100px;
        font: bold 17px/30px arial,sans-serif;
    }

    tr p.gray {
        color: gray;
    }

    tr p.audit span.red {
        color: red;
    }

    tr p.audit span.blue {
        color: blue;
    }
    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }
    #Footer div {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    #search select {
        text-align: left;
    }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .td_left {
        text-align: left;
        padding-left: 20px;
    }

    .td_Content {
        padding: 5Px 5px;
    }

    .report_data .layui-disabled, .report_data .layui-disabled:hover {
        color: black !important;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }
</style>
